<template>
    <div class="order">
        <div class="condition">
            <span v-for="(item,index) in orderStatusDict" @click="changeOrderStatus(item.pay_status)" 
            :key="index"
            :class="{is_active:item.isActive}"
            >
                    {{ item.payName }}
            </span>
        </div>
        <table>
            <thead class="table-header">
                <th>订单详情</th>
                <th>收货人</th>
                <th>金额</th>
                <th>状态</th>
                <th>操作</th>
            </thead>
            <!-- 这个标签是后边用来控制循环的 -->
            <tbody class="order-info" v-for="(item,index) in goodsInfo" :key="index">       
                    <!-- 这个tr是为了占位用的，留出来一个空行 -->
                    <tr class="blank-tr"></tr>
                    <tr class="info-header">
                        <td class="order-num">
                            <span>{{ item.create_time.replace('T',' ').replace('Z',' ') }}</span>
                            <span>订单号</span>
                            <b>{{ item.trade_no }}</b>
                        </td>
                        <td colspan="4" class="img-td">
                            <el-popconfirm
                                width="220"
                                title="确认删除这个订单吗?"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                @confirm="deleteOrder(item.trade_no)"
                                >
                                <template #reference>
                                    <img src="@/assets/images/profile/delete.png">
                                </template>
                            </el-popconfirm>
                        </td>
                    </tr>
                    <tr class="info-detail" v-for="(data,key) in item.order_info" :key="key">
                        <td class="goods-detail">
                            <a :href="'/detail/' + data.sku_id" target="_blank">
                                <img :src="data.image">
                                <div>
                                    <span class="dian2">{{data.name}}</span>
                                </div>
                            </a>
                            <div class="goods-num">
                                x{{data.goods_num}}
                            </div>
                        </td>
                        <td :rowspan="item.order_info.length" v-if="key < 1">郑健</td>
                        <td :rowspan="item.order_info.length" v-if="key < 1">{{ item.order_amount }}</td>
                        <td :rowspan="item.order_info.length" v-if="key < 1" >{{ switchStatus(item.pay_status)[0] }}</td>
                        <td :rowspan="item.order_info.length" v-if="key < 1" class="order-action"><span 
                            class="order-action"
                            @click="toAction(item.pay_status,item.trade_no,item.order_amount,item.order_info)"
                            >{{ switchStatus(item.pay_status)[1] }}</span></td>
                    </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
    import { onMounted,ref,reactive } from 'vue'
    import { createOrderData, getAddOrders,updateOrderInfoData } from '@/network/order'
    import router from '@/router';
    import { ElMessage } from 'element-plus';

    let goodsInfo = ref()

    const getAllOrderInfo = async (data=-1) => {
        const result = await getAddOrders(data)
        console.log(result)
        goodsInfo.value = result
    }

    onMounted(() => {
        getAllOrderInfo()
    })


    //筛选条件的变量
    const orderStatusDict = ref([
        {
            pay_status:-1,
            payName:'全部订单',
            isActive:true
        },
        {
            pay_status:0,
            payName:'待确认',
            isActive:false
        },
        {
            pay_status:1,
            payName:'待付款',
            isActive:false
        },
        {
            pay_status:2,
            payName:'待收货',
            isActive:false
        },
        {
            pay_status:3,
            payName:'已完成',
            isActive:false
        },
    ])

    const changeOrderStatus = (orderStatus) => {
        orderStatusDict.value.forEach(item => {
            if(item.pay_status === orderStatus) {
                // 这里拿着新的状态码pay_status向后端发请求了
                getAllOrderInfo(orderStatus)
                item.isActive = true
            }else {
                item.isActive = false
            }
        })
        


        
    }

    const deleteOrder = (tradeNo) => {
        let updateData = ref({
            trade_no:tradeNo,
            is_delete:1
        })
        updateOrderInfoData(updateData.value).then(res => {
            ElMessage({
                message:"删除成功",
                type:'success'
            })
            // 刷新页面
            window.location.reload()
        })
    }

    const switchStatus = (pay_status) => {
        const orderStatus = reactive({
            0:['待确认','确认订单'],
            1:['待付款','支付订单'],
            2:['待收货','确认收货'],
            3:['已完成','再次购买']
        })
        return orderStatus[pay_status]
    }


    const toAction = (pay_status,trade_no,order_amount,order_info) => {
        
        if(pay_status == 0) {
            router.push('/order/' + trade_no)
        }else if(pay_status == 1) {
            router.push({
                name:'OrderPay',
                query:{
                    tradeNo:trade_no,
                    orderAmount:order_amount
                }
            })
        }else if(pay_status == 2) {
            let updateData = ref({
                trade_no:trade_no,
                pay_status:3
            })
            updateOrderInfoData(updateData.value).then(res => {
                ElMessage({
                    message:"收货成功",
                    type:"success"
                })
                // 页面刷新
                window.location.reload()
            })
        }else if(pay_status == 3) {

            order_info.forEach(item => {
                item.nums = item.goods_num
            })

            let OrderData = ref({
                trade:{
                    order_amount:order_amount
                },
                goods:order_info
            })

            let orderNo = ref('')
            createOrderData(OrderData.value).then(res => {
                orderNo.value = res.trade_no
                router.push('/order/' + orderNo.value)
            })
        }

    }
</script>

<style lang="less" scoped>
    .order {
        background-color: #fff;
        padding: 20px;
        .condition {
            span {
                margin-right: 20px;
                &:hover {
                    cursor: pointer;
                    color: #e2231a;
                }
            }
            .is_active {
                color: #e2231a;
                font-weight: 700;
                border-bottom: 2px solid #e2231a
            }
        }
        table {
            border-collapse: collapse;
            .table-header {
                border: 1px solid #e5e5e5;
                background-color: #f5f5f5;
                height: 35px;
                
                th:first-child {
                    width: 500px;
                }

                th:not(:first-child) {
                    width: 100px;
                }
            }
            .order-info {
                // border: 1px solid #e5e5e5;
                .blank-tr {
                    height: 20px;
                }

                .info-header {
                    border: 1px solid #e5e5e5;
                    background-color: #f5f5f5;
                    height: 30px;
                    color: #aaa;
                    .order-num {
                        span {
                            margin-left: 30px;
                        }
                        b {
                            color: #333;
                        }
                    }
                    .img-td {
                        text-align: right;
                        img {
                            width: 15px;
                            height: 15px;
                            margin-right: 45px;
                            &:hover {
                            cursor: pointer;
                            content:url('@/assets/images/profile/delete-red.png')
                        }
                        }
                    }

                }

                .info-detail {
                    border: 1px solid #e5e5e5;
                    .goods-detail {
                        border: 1px solid #e5e5e5;
                        display: flex;
                        a {
                            display: flex;
                            img {
                                width: 60px;
                                height: 60px;
                                margin-left: 10px;
                            }
                            div {
                                margin-left: 10px;
                                width: 300px;
                                padding-top: 15px;

                                span {

                                }
                            }
                        }
                        .goods-num {

                            padding-top: 15px;
                            margin-left: 70px;
                        }
                    }
                    td:not(:first-child) {
                        text-align: center;
                        // font-weight: bold;
                    }

                    .order-action {
                        span {
                            border: 1px solid #ddd;
                            background-color: #f5f5f5;
                            width: 90px;
                            height: 30px;
                            display: inline-block;
                            line-height: 30px;
                            text-align: center;

                            &:hover {
                                cursor: pointer;
                                border: 1px solid #e2231a;
                                color: #e2231a;
                            }
                        }
                    }
                }
            }
        }
    }
</style>